<template>
  <!--公告-->
  <div id="notice">
    <div class="topTab clearFloat">
      <div v-for="(item,index) in topTabTitle" :key="index" :class="index===clickIndex?'lf active':'lf'" @click="clickTab(index)">
        {{item}}
      </div>
      <div class="rf">
        <el-input placeholder="请输入搜索内容" v-model="value" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <div class="lineDiv"></div>
    </div>

    <div class="noticeList">
      <div v-for="(item,index) in list" class="notice-c">
        <img src="@/assets/images/home/tu1.png" alt="">
        <div class="notice-r">
          <div class="notice-t clearFloat">
            <el-tag class="lf">信息公告</el-tag>
            <p class="lf">{{item.bt}}</p>
          </div>
          <div class="contentDiv">{{item.nr}}</div>
          <div class="bottomTime">
            <span>{{item.createTime}}</span>
            <span>南京市环保局</span>
          </div>
        </div>
      </div>
    </div>

    <!--分页器-->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="pagination.currentPage"
      :page-size="20"
      layout="total, prev, pager, next"
      :total="pagination.total"
      prev-text="上一页"
      next-text="下一页">
    </el-pagination>
  </div>
</template>

<script>
  import {selectInfoList} from '@/request/api'
  export default {
    name: 'notice',
    data () {
      return {
          value: '',
          list:[
            {img:require('@/assets/images/home/tu1.png'),tag:"信息公告"},
            {img:require('@/assets/images/home/tu2.png'),tag:"信息公告"},
            {img:require('@/assets/images/home/tu3.png'),tag:"信息公告"},
            {img:require('@/assets/images/home/tu4.png'),tag:"信息公告"},
            {img:require('@/assets/images/home/tu5.png'),tag:"信息公告"},
            {img:require('@/assets/images/home/tu1.png'),tag:"信息公告"},
            {img:require('@/assets/images/home/tu2.png'),tag:"信息公告"},
            {img:require('@/assets/images/home/tu3.png'),tag:"信息公告"},
            {img:require('@/assets/images/home/tu4.png'),tag:"信息公告"},
            {img:require('@/assets/images/home/tu5.png'),tag:"信息公告"}
          ],
          topTabTitle:["信息公告"],
          clickIndex:0,
          currentPage: 1,
        /*   -------分页-------- */
        pagination: {
          currentPage: 1,//当前页
          total: 0//共多少条
        },
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList() {
        let paramster = {
          "_search": true,
          "bgTm": "",
          "endTm": "",
          "pageNumber": this.pagination.currentPage || 1,
          "pageSize": 20
        }
        selectInfoList(paramster).then(res=> {
          if(res.code == 200) {
            this.list = res.data.records
            this.pagination.total = res.data.total
          }
        }).catch(() => {
        })
      },
      toPath() {
        this.$router.push({
          name:'noticeInfo'
        })
      },
      clickTab(index){
        this.clickIndex = index;
      },
      //      换页
      handleCurrentChange(val) {
        this.pagination.currentPage = val
        console.log(`当前页: ${val}`);
        this.getList()
      }
    }
  }
</script>

<style scoped>
  p{
    margin:0;
  }
.notice-c {
  width: 100%;
  height: 160px;
  padding: 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
  cursor:pointer;
}
  .notice-c:last-child{
    border-bottom:0;
  }
  .notice-c img {
    width: 224px;
    height: 120px;
    vertical-align: middle;
  }
  .notice-r {
    vertical-align: middle;
    height: 100%;
    font-size: 20px;
    display: inline-block;
    padding: 0 30px;
    box-sizing: border-box;
  }
  .notice-r .notice-t{
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 30px;
  }
  .fd {
    position: absolute;
    right: 10px;
    top: 62px;
    font-size: 30px;
    color: #ccc;
  }

  .lineDiv{
    height: 1px;
    background: #E5E5E5;
    bottom: -10px;
    position: absolute;
    width: 100%;
  }
  .topTab{
    width:100%;
    height:48px;
    line-height:48px;
    position: relative;
    top:20px;
    margin-bottom:20px;
  }
  .topTab div.lf{
    font-size: 20px;
    color: #9A9A9A;
    margin-right:59px;
    cursor:pointer;
    padding-bottom: 10px;
  }
  .topTab div.active{
    color: #22944E;
    position: relative;
  }
  .topTab div.active:after{
    content:"";
    display:block;
    position: absolute;
    width:100%;
    height: 2px;
    background: #22944E;
    bottom:0;
    left:0;
    z-index:10;
  }

  /deep/ .input-with-select{
    width:278px;
    position: relative;
  }
  .noticeList{
    margin-top:50px;
    background:#fff;
    margin-bottom:40px;
  }

  /deep/ .el-tag{
    width: 68px;
    height: 24px;
    background: #FFFFFF;
    border: 1px solid #22944E;
    border-radius: 2px;
    font-size: 14px;
    color: #22944E;
    padding: 0;
    text-align: center;
    line-height: 24px;
  }
  .notice-t p{
    font-size: 20px;
    font-weight: bold;
    color: #343434;
    margin:-4px 0 0 10px;
  }
  .notice-r .contentDiv{
    font-size: 16px;
    color: #666666;
    margin-bottom:27px;
  }
  .bottomTime span{
    font-size: 16px;
    color: #9A9A9A;
    margin-right:44px;
  }
</style>
